<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>动态启用禁用搜索框</title>
	</head>
	<script type="text/javascript">
		function checkInputs() {
		    // 获取搜索框元素
		    const search1 = document.getElementById('search1');
		    const search2 = document.getElementById('search2');
		    const search3 = document.getElementById('search3');
		  
		    // 如果搜索框1有输入内容，则启用搜索框2
		    if (search1.value.trim() !== "") {
		        search2.disabled = false;
		    } else {
		        search2.disabled = true;
		        search3.disabled = true; // 如果搜索框2被禁用，搜索框3也应该禁用
		        search2.value = ""; // 清空搜索框2内容
		        search3.value = ""; // 清空搜索框3内容
		    }
		
		    // 如果搜索框2有输入内容，则启用搜索框3
		    if (search2.value.trim() !== "") {
		        search3.disabled = false;
		    } else {
		        search3.disabled = true;
		        search3.value = ""; // 清空搜索框3内容
		    }
		}
		
		// 初始化时检查输入状态
		window.onload = checkInputs;

	</script>
	<body>

		<label for="search1">搜索框1:</label>
		<input type="text" id="search1" placeholder="请输入数据" oninput="checkInputs()">
		<br><br>

		<label for="search2">搜索框2:</label>
		<input type="text" id="search2" placeholder="请输入数据" oninput="checkInputs()" disabled>
		<br><br>

		<label for="search3">搜索框3:</label>
		<input type="text" id="search3" placeholder="请输入数据" oninput="checkInputs()" disabled>
		<br><br>

		<script src="script.js"></script>
	</body>
</html>
